<template>
  <h3>3D地图切换天气</h3>
  <div class="about">
    <div id="gisView"></div>
    <div class="myradio">
      <el-radio-group
        v-model="radioWatcher"
        class="ml-4"
        @change="changeWeather"
        style="height: 40px; line-height: 40px"
      >
        <el-radio value="rainy" size="large">雨天</el-radio>
        <el-radio value="foggy" size="large">雾天</el-radio>
        <el-radio value="cloudy" size="large">晴天</el-radio>
        <el-radio value="snowy" size="large">雪天</el-radio>
      </el-radio-group>
      <div
        style="display: flex; font-size: 14px; height: 40px; line-height: 40px"
      >
        {{ titlt }}强度:<el-slider
          :min="0"
          :max="100"
          v-model="watcherStrength"
          @input="changeWeather"
          style="
            height: 40px;
            line-height: 40px;
            width: 280px;
            margin-left: 5px;
          "
        ></el-slider>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Map from "@arcgis/core/Map";
import SceneView from "@arcgis/core/views/SceneView.js";
import IntegratedMeshLayer from "@arcgis/core/layers/IntegratedMeshLayer.js";

/**
 * Map: 存放所有图层
 * SceneView: 显示3d图层，并且图层的事件和配置都写在里面（即负责用户的交互）
 * IntegratedMeshLayer: 用于加载和显示三维集成网格数据（如倾斜摄影数据或生成的3D网格模型）的图层类。
 *   这个类允许用户在场景中可视化复杂的地形和城市模型，提供高度详细的地面和建筑物表现
 */

let mymap = null;
let myview = null;
let integratedMeshLayer = null;
let radioWatcher = ref("snowy"); // 当前天气类型
let weather = ref(null);
let watcherStrength = ref(30); // 天气强度
let titlt = ref("雾天"); // 天气类型

// 初始化地图
onMounted(() => {
  initMap();
});

// 修改天气   rainy雨天   foggy雾天   cloudy晴天  snowy雪天
const changeWeather = () => {
  switch (radioWatcher.value) {
    case "cloudy":
      weather.value = {
        type: "cloudy",
        cloudCover: watcherStrength.value / 100,
      };
      titlt.value = "晴天";
      myview.environment.weather = weather.value;
      break;
    case "rainy":
      weather.value = {
        type: "rainy",
        precipitation: watcherStrength.value / 100,
      };
      titlt.value = "雨天";
      myview.environment.weather = weather.value;
      break;
    case "snowy":
      weather.value = {
        type: "snowy",
        snowCover: true,
        precipitation: watcherStrength.value / 100,
      };
      titlt.value = "雪天";
      myview.environment.weather = weather.value;
      break;
    case "foggy":
      weather.value = {
        type: "foggy",
        fogStrength: watcherStrength.value / 100,
      };
      titlt.value = "雾天";
      myview.environment.weather = weather.value;
      break;
  }
};

// 初始化地图
const initMap = () => {
  integratedMeshLayer = new IntegratedMeshLayer({
    // 集成网格服务URL
    url: "https://ws8575.club/web/rest/services/Hosted/场景发布测试_全局场景_集成网格_3857_WSL1/SceneServer",
    elevationInfo: {
      mode: "absolute-height",
      offset: -5, // 设置模型高度，负数表示向下偏移
    },
    spatialReference: {
      // 设置坐标系
      wkid: 3857,
    },
  });

  mymap = new Map({
    basemap: "hybrid", // 设置底图
    layers: [integratedMeshLayer], // 设置图层
    ground: "world-elevation", // 设置高程服务图层
  });

  myview = new SceneView({
    container: "gisView", // 挂载在那个DOM
    map: mymap, // 绑定的map对象
    qualityProfile: "high",
    viewingMode: "global", //设置视图类型,有"global"和"local"两种
    zoom: 10, // 设置视图初始的缩放级别
    environment: {
      // 设置环境属性
      weather: {
        type: "snowy",
        cloudCover: 0.5,
      },
    },
  });

  myview.when(() => {
    myview.goTo(
      {
        target: integratedMeshLayer.fullExtent,
        tilt: 60,
        scale: 3000,
      },
      {
        duration: 2000, // 初始化动画持续的时间
      }
    );
  });

  // 把缩放按钮去掉，和把底部的介绍去掉
  myview.ui.remove(["zoom", "compass", "attribution", "navigation-toggle"]);
};
</script>

<style scoped>
.about {
  height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  /* flex-direction: column; */
}
.about #gisView {
  width: 100%;
  min-height: 80vh;
  border: 1px solid teal;
}
.myradio {
  width: 350px;
  height: 80px;
  position: fixed;
  top: 130px;
  left: 30px;
  background-color: white;
  border-radius: 5px;
  padding: 0 10px;
}
</style>
